---
title: Lets see what we can do with rehype pretty code
description: Syntax highlighting, line numbers, line highlights, word highlights
date: 2024-03-04
tags: ["code", "rehype pretty", "mdx"]
published: true
---

[`rehype-pretty-code`](https://github.com/atomiks/rehype-pretty-code) is a Rehype plugin powered by the
[`shiki`](https://github.com/shikijs/shiki) syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting.

## Editor-Grade Highlighting

<span className="mix-blend-plus-lighter text-zinc-400/80">
  Enjoy the accuracy and granularity of VS Code's syntax highlighting engine and
  the popularity of its themes ecosystem — use any VS Code theme you want!
</span>

## Line Numbers and Line Highlighting

Draw attention to a particular line of code.

```js {4} showLineNumbers
import { useFloating } from "@floating-ui/react";

function MyComponent() {
  const { refs, floatingStyles } = useFloating();

  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}
```

## Word Highlighting

Draw attention to a particular word or series of characters.

```js /floatingStyles/
import { useFloating } from "@floating-ui/react";

function MyComponent() {
  const { refs, floatingStyles } = useFloating();

  return (
    <>
      <div ref={refs.setReference} />
      <div ref={refs.setFloating} style={floatingStyles} />
    </>
  );
}
```

## ANSI Highlighting

```ansi
[0;36m  vite v5.0.0[0;32m dev server running at:[0m

  > Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m
  > Network: [0;2muse `--host` to expose[0m

  [0;36mready in 125ms.[0m

[0;2m8:38:02 PM[0m [0;36;1m[vite][0m [0;32mhmr update [0;2m/src/App.jsx
```

Inline ANSI: `> Local: [0;36mhttp://localhost:[0;36;1m3000[0;36m/[0m{:ansi}`

---

### Kitchen Sink Meta Strings

```js showLineNumbers {2-4} title="isEven.js" /console/ caption="Im a caption"
function isEven(number) {
  if (number === 1) {
    return false;
  } else if (number === 2) {
    return true;
  } else if (number === 3) {
    return false;
  } else if (number === 4) {
    return true;
  } else if (number === 5) {
    return false;
  } else if (number === 6) {
    return true;
  } else if (number === 7) {
    return false;
  } else if (number === 8) {
    return true;
  } else if (number === 9) {
    return false;
  } else if (number === 10) {
    return true;
  } else {
    return "Number is not between 1 and 10.";
  }
}

// Example usage:
console.log(isEven(3)); // Should return false
console.log(isEven(4)); // Should return true
console.log(isEven(11)); // Should return "Number is not between 1 and 10."
```
